<template>
  <div class="btn">
    <div class="batch_btn">
      <a-button type="primary" :disabled="!hasSelected" @click="ChangeOperation(40001)"> 批量发布 </a-button>
      <a-button type="primary" :disabled="Deactivate" @click="ChangeOperation(40002)"> 批量停用 </a-button>
    </div>
    <a-button type="primary" @click="addDataAsset(1)">新增资产表</a-button>
  </div>
  <a-table
    :columns="columns"
    :data-source="table.data"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, preserveSelectedRowKeys: true }"
    :row-key="(record:daDataItem) => record.daCode"
    :loading="loading"
    :pagination="pageOptions"
    :locale="{
      cancelSort: '点击取消排序',
      triggerAsc: '点击升序',
      triggerDesc: '点击降序',
    }"
    :scroll="{ y: 'calc(100vh - 400px)' }"
  >
    <template #bodyCell="{ column, record }">
      <!-- 数据资产表中文名称 -->
      <template v-if="column.dataIndex === 'daChName'">
        <a-button type="link" style="font-weight: 500; color: #008af7" @click="showModal(record)">{{ record.daChName }}</a-button>
      </template>
      <!-- 数据资产表英文名称 -->
      <template v-if="column.dataIndex === 'daEnName'">
        <a-button type="link" style="font-weight: 500; color: #008af7" @click="showModal(record)">{{ record.daEnName }}</a-button>
      </template>
      <!-- 状态 -->
      <template v-if="column.dataIndex === 'daStatus'">
        <a-tag :color="record.statusColor">{{ record.daStatus }}</a-tag>
      </template>

      <!-- 操作 -->
      <template v-else-if="column.dataIndex === 'operation'">
        <!-- 未发布 -->
        <span v-show="record.daStatus === '未发布'" class="list_btn">
          <a-popconfirm placement="topRight" ok-text="是" cancel-text="否" @confirm="releaseOrOutage(record, 40001)">
            <template #title>
              <p>是否将码表状态更改为发布</p>
            </template>
            <a-button type="link" danger>发布</a-button>
          </a-popconfirm>
          <a-button type="link" @click="addDataAsset(0)">编辑</a-button>
          <a-popconfirm placement="topRight" ok-text="是" cancel-text="否" @confirm="delAsset(record.daCode)">
            <template #title>
              <p>是否删除码表</p>
            </template>
            <a-button type="link" danger>删除</a-button>
          </a-popconfirm>
        </span>
        <!-- 已发布 -->
        <span v-show="record.daStatus === '已发布'" class="list_btn">
          <a-popconfirm placement="topRight" ok-text="是" cancel-text="否" @confirm="releaseOrOutage(record, 40002)">
            <template #title>
              <p>是否将码表状态更改为停用</p>
            </template>
            <a-button type="link" danger>停用</a-button>
          </a-popconfirm>
        </span>
        <!-- 已停用 -->
        <span v-show="record.daStatus === '已停用'" class="list_btn">
          <a-popconfirm placement="topRight" ok-text="是" cancel-text="否" @confirm="releaseOrOutage(record, 40001)">
            <template #title>
              <p>是否将码表状态更改为发布</p>
            </template>
            <a-button type="link" danger>发布</a-button>
          </a-popconfirm>
          <a-button type="link" @click="addDataAsset(0)">编辑</a-button>
        </span>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
  import { delDataAsset, upDateAssert } from '@/api/test/index';
  import { getDataAssetDetailHooks } from '@/hooks/DataAssetManagementHooks/getDataAssetDetailHooks';
  import { getListHooks } from '@/hooks/DataAssetManagementHooks/getDataAssetListHooks';
  import { daDataItem, Key, operationStatus } from '@/pages/CodeTables/specification';
  const columns = [
    {
      title: '数据资产表中文名称',
      dataIndex: 'daChName',
      width: '18%',
      align: 'center',
    },
    {
      title: '数据资产表英文名称',
      dataIndex: 'daEnName',
      align: 'center',
      width: '18%',
    },
    {
      title: '数据资产表描述',
      dataIndex: 'daDescribe',
      align: 'center',
    },
    {
      title: '发布状态',
      dataIndex: 'daStatus',
      width: '12%',
      align: 'center',
    },
    {
      title: '更新时间',
      width: '13%',
      dataIndex: 'updateTime',

      align: 'center',
      sorter: {
        compare: (a: any, b: any) => (a.updateTime > b.updateTime ? 1 : -1),
        multiple: 3,
      },
      sortDirections: ['ascend', 'descend'],
    },
    {
      title: '操作',
      width: '19%',
      align: 'center',
      dataIndex: 'operation',
    },
  ];

  //引入hooks
  const { table, loading, getData } = getListHooks();
  const { dataAsset, tableData, Details } = getDataAssetDetailHooks();
  // 控制新增--编辑抽屉
  const addDataAsset = async (e: number) => {
    if (e != 1) {
      console.log(`编辑`);
      dataAsset.drawer = true;
    } else {
      console.log(`新增`);
      dataAsset.drawer = true;
      tableData.daCode = '';
      tableData.daChName = '';
      tableData.daEnName = '';
      tableData.daDescribe = '';
      tableData.directoryNameList = [''];
      tableData.daFieldDTO = [];
    }
  };
  //详情弹窗
  const showModal = async (e: daDataItem) => {
    dataAsset.sdialog = true;
    tableData.daCode = e.daCode;
    tableData.daChName = e.daChName;
    tableData.daEnName = e.daEnName;
    tableData.daDescribe = e.daDescribe;
    await Details();
  };
  //删除按钮
  const delAsset = async (daCode: string) => {
    await delDataAsset(daCode);
    getData();
  };
  // 发布、停用按钮
  const releaseOrOutage = async (e: daDataItem, daStatus: 40001 | 40002) => {
    const deliverInfo: operationStatus = {
      status: daStatus,
      codeList: [e.daCode],
    };
    await upDateAssert(deliverInfo);
    table.num = 1;
    getData();
  };
  // 第几行是否被选择
  const selectedRowKeys = ref<Key[]>([]);
  // 保存选择后的数据---需要向后端传递的数据
  const selectStopwatch = ref<Object[]>([]);
  // 按钮是否禁用
  const hasSelected = computed(() => selectedRowKeys.value.length > 0);
  const Deactivate = ref<boolean>(true);
  // 监听被选中的列表状态
  watch(
    () => selectStopwatch.value,
    nv => {
      Deactivate.value = false;
      if (nv.length == 0) {
        Deactivate.value = true;
      } else {
        nv.forEach((item: { [arg: string]: any }) => {
          if (item.daStatus == '未发布') {
            Deactivate.value = true;
          }
        });
      }

      console.log(' Deactivate.value ' + Deactivate.value);
    },
    { deep: true },
  );
  // 勾选后将勾选数据插入数组
  const onSelectChange = (e: Key[], record: Key[]) => {
    console.log('selectedRowKeys changed: ', e);
    console.log(`${e}-- ${JSON.stringify(record)}`);
    selectedRowKeys.value = e;
    selectStopwatch.value = record;
    console.log(`${JSON.stringify(selectedRowKeys.value)}--${JSON.stringify(selectStopwatch.value)}`);
  };
  //批量按钮操作
  const ChangeOperation = async (e: 40001 | 40002) => {
    loading.value = true;
    const deliverInfo: operationStatus = {
      status: e,
      codeList: selectedRowKeys.value as [string],
    };
    await upDateAssert(deliverInfo);
    table.num = 1;
    getData();
    selectedRowKeys.value = [];
    selectStopwatch.value = [];
  };
  // 分页
  const pageOptions = computed(() => {
    return {
      total: table.total,
      current: table.num,
      pageSize: table.size,
      defaultPageSize: 10,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '30'],
      showQuickJumper: true,
      showTotal: () => `共${table.total}条`,
      onChange: (pageNum: number, pageSize: number) => {
        table.num = pageNum;
        table.size = pageSize;
        getData();
      },
    };
  });
</script>

<style lang="less" scoped>
  :deep(.ant-table-thead > tr > th) {
    font-weight: 600;
    background: rgb(238, 238, 238);
  }

  .btn {
    display: flex;
    justify-content: space-between;
    margin: 2% 4% 2% 0;

    .batch_btn {
      display: flex;
      justify-content: space-evenly;
      width: 30%;
    }
  }

  :deep(.ant-table-body) {
    min-height: 360px;
    box-shadow: inset 0 -20px 20px -20px #9e9e9e57;

    table {
      height: 360px;
    }
  }

  .list_btn {
    display: flex;
    flex-wrap: wrap;

    .ant-btn {
      padding: 5px;
    }
  }
</style>
